<template>
  <section>
    <!-- 阻止单击事件继续传播 -->
    <a v-on:click.stop="doThis">这样做 click.stop</a>

    <!-- 阻止元素默认行为 -->
    <form v-on:submit.prevent="doThis">
      <button>这样做 click.prevent</button>
    </form>

    <!-- 修饰符可以串联 -->
    <a v-on:click.stop.prevent="doThis">这样做 click.stop.prevent</a>

    <!-- 只有修饰符 -->
    <form v-on:submit.prevent>
      <button>这样做 submit.prevent</button>
    </form>

    <!-- 添加事件监听器时使用事件捕获模式 -->
    <!-- 即元素自身触发的事件先在此处理，然后才交由内部元素进行处理 -->
    <div v-on:click.capture="doThis">这样做 click.capture</div>

    <!-- 2.1.4 新增 -->
    <!-- 点击事件将只会触发一次 -->
    <a v-on:click.once="doThis">这样做 click.once</a>

    <!-- 2.3.0 新增 -->
    <!-- 滚动事件的默认行为 (即滚动行为) 将会立即触发 -->
    <!-- 而不会等待 `onScroll` 完成  -->
    <!-- 这其中包含 `event.preventDefault()` 的情况 -->
    <div class="scroll" v-on:scroll.passive="onScroll">
      <div class="content">
        滚动之前执行 scroll.passive
        溢出
      </div>
    </div>
  </section>
</template>

<script>
export default {
  name: "EventModifier",
  methods: {
    doThis() {
      console.log("这样做");
    },
    onScroll() {
      console.log("滚动之前执行");
    }
  }
};
</script>

<style scoped>
.scroll {
  height: 100px;
  overflow: auto;
}
.content {
  height: 400px;
  background-color: aqua;
}
</style>
